<template>
  <div id="app">
    <div id="loading" v-show="shopShow">正在加载出租车数据...</div>
    <div id="menuLeft">
      <div id="step1">
        <h4>数据选择：</h4>
        <el-cascader
            ref="getSelectData"
            placeholder="请选择需要渲染的数据"
            v-model="dataValue"
            :options="options"
            @change="handleSelectChange"
            filterable></el-cascader>
      </div>
      <div id="VisualShow">
        <h4>选择网格图渲染方式</h4>
        <el-button @click="addSgrid" :disabled="isDisabled">向量网格图</el-button>
        <el-button @click="addSvector" :disabled="isDisabled">轨迹向量场</el-button>
        <el-button @click="clear">清除</el-button>
      </div>
    </div>
    <div ref="map" id="main" style="height:100%;width:100%; "></div>
  </div>

</template>



<script>

import 'echarts/extension/bmap/bmap'
import {baidumap} from '@/assets/js/Public/baiduditu'

export default {
  name: "Svector",
  data() {
    return {
      isDisabled: true,
      shopShow: false,
      mapStyle: {
        styleJson: baidumap,
      },
      map: {},
      mapLng: 116.403,
      mapLat: 39.923,
      mapZoom: 12,
      options: this.$store.state.dataPoint[0].children,

      dataValue: [],
      taxiData: [],
      taxiData1: [],
      hotData: [],
      loading: {},
      vecdata: [],
      geodata: [],
      girddata: [],
      maxMag: 0,
      minMag: 15,
    }
  },
  created() {
    this.$store.commit('loadMenuDataPoint')
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.map = this.$echarts.init(this.$refs.map)
      this.map.setOption({
        bmap: {
          center: [this.mapLng, this.mapLat],
          zoom: this.mapZoom,
          roam: true,
        }, //bmap
      })
      this.map.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
    },
    clear() {
      // this.map.clear()
      this.map.setOption({
        bmap: {
          center: [this.mapLng, this.mapLat],
          zoom: this.mapZoom,
          roam: true,
        }
      }, true)
      this.map.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
    },
    loadingStart() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    handleSelectChange(val){
      this.shopShow = true
      this.isDisabled = true
      let downSelectData = this.$refs.getSelectData.getCheckedNodes()
      this.downSelectData = downSelectData[0].data.value
      console.log(this.downSelectData,'获取下拉节点的值');

      this.request.get("/taxiData/SGmap",{
        params:{
          downSelectData: this.downSelectData,
        }
      },).then(res => {
        this.taxiData = res.data
        console.log(this.taxiData,'向量网格图')
        this.shopShow = !this.shopShow
        this.isDisabled = !this.isDisabled
      })

      this.request.get("/taxiData/Svectormap",{
        params:{
          downSelectData: this.downSelectData,
        }
      },).then(res => {
        this.taxiData1 = res.data
        console.log(this.taxiData1,'Svectormap数据')
      })
    },
    addSgrid() {
      this.clear()
      // this.request.get("/taxiData/SGmap",{
      //   params:{
      //     downSelectData: this.downSelectData,
      //   }
      // },).then(res => {
      //   this.taxiData = res.data
      //   console.log(this.taxiData)

        // if (this.taxiData.length === 0) {
        //   this.$message.error("目前数据为空，请您上传相关数据！")
        // } else {

          let COLORS = ["#DCF0FF", "#BBE1FD", "#8FCAF4", "#58A9E4", "#0D8DE9", "#0D6EB4", "#00528D", "#023356", '#ffffff'];

          function renderItem(params, api) {
            var lngIndex = api.value(0);
            var latIndex = api.value(1);

            var pointLeftTop = getCoord(params, api, lngIndex, latIndex);
            var pointRightBottom = getCoord(params, api, lngIndex + 1, latIndex + 1);
            return {
              type: 'rect',
              shape: {
                x: pointLeftTop[0],
                y: pointLeftTop[1],
                width: pointRightBottom[0] - pointLeftTop[0],
                height: pointRightBottom[1] - pointLeftTop[1]
              },
              style: api.style({
                stroke: 'rgba(0,0,0,0.1)'
              }),
              styleEmphasis: api.styleEmphasis()
            };
          }

          function getCoord(params, api, lngIndex, latIndex) {
            var coords = params.context.coords || (params.context.coords = []);
            var key = lngIndex + '-' + latIndex;
            // bmap returns point in integer, which makes cell width unstable.
            // So we have to use right bottom point.
            let latExtent = [115.9, 116.8]
            let lngExtent = [39.5, 40.6]
            let cellCount = [100, 100];
            let cellSizeCoord = [
              (lngExtent[1] - lngExtent[0]) / cellCount[0],
              (latExtent[1] - latExtent[0]) / cellCount[1]
            ];
            return (
                coords[key] ||
                (coords[key] = api.coord([
                  +(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
                  +(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
                ]))
            );
          }

          const option = {
            tooltip: {},
            visualMap: {
              title: {
                text: '出租车乘客OD网格图',
                right: '20px',
                top: 26,
                textStyle: {
                  fontSize: 23,
                  color: '#feb64d'
                }
              },
              type: 'piecewise',
              inverse: true,
              top: 10,
              right: 10,
              pieces: [
                {
                  value: "北",
                  label: "北",
                  color: COLORS[0],
                  opacity: 0.7
                },
                {
                  value: "东北",
                  label: "东北",
                  color: COLORS[1],
                  opacity: 0.7
                },
                {
                  value: "东",
                  label: "东",
                  color: COLORS[2],
                  opacity: 0.7
                },
                {
                  value: "东南",
                  label: "东南",
                  color: COLORS[3],
                  opacity: 0.7
                },
                {
                  value: "南",
                  label: "南",
                  color: COLORS[4],
                  opacity: 0.7
                },
                {
                  value: "西南",
                  label: "西南",
                  color: COLORS[5],
                  opacity: 0.7
                },
                {
                  value: "西",
                  label: "西",
                  color: COLORS[6],
                  opacity: 0.7
                },
                {
                  value: "西北",
                  label: "西北",
                  color: COLORS[7],
                  opacity: 0.7
                },
                {
                  value: "空",
                  label: "空",
                  color: COLORS[8],
                  opacity: 0.1
                }
              ],
              borderColor: '#ccc',
              borderWidth: 2,
              backgroundColor: '#eee',
              dimension: 2,
              inRange: {
                color: COLORS,
                opacity: 0.7
              }
            },
            series: [
              {
                type: 'custom',
                coordinateSystem: 'bmap',
                renderItem: renderItem,
                animation: false,
                emphasis: {
                  itemStyle: {
                    color: 'yellow'
                  }
                },
                encode: {
                  tooltip: 2
                },
                data: this.taxiData
              }
            ],
            bmap: {
              center: [116.403, 39.923],
              zoom: 12,
              roam: true,
              mapStyle: {
                styleJson: baidumap
              }
            }
          }
          console.log(this.taxiData, "这里是taxidata")
          console.log(option, '这里是option')
          this.map.setOption(option)
          // setTimeout(() => {
          //   this.loading.close()
          // }, 400);
        // }
      // })
    },


    addSvector() {
      this.clear()
      // this.request.get("/taxiData/Svectormap",{
      //   params:{
      //     downSelectData: this.downSelectData,
      //   }
      // },).then(res => {
      //   this.taxiData = res.data
      //   console.log(this.taxiData,'Svectormap数据')
        // if (this.taxiData.length === 0) {
        //   this.$message.error("目前数据为空，请您上传相关数据！")
        // } else {
          let lngExtent = [39.5, 40.6];
          let latExtent = [115.9, 116.8];
          let cellCount = [100, 100];
          let cellSizeCoord = [
            (lngExtent[1] - lngExtent[0]) / cellCount[0],
            (latExtent[1] - latExtent[0]) / cellCount[1]
          ];
          let mapData = {
            title: '',
            mapColor: '#5c9ac1',   //地图填充颜色
            borderColor: '#5278a7',//地图边框颜色
            shadowColor: '#5174a4', //阴影颜色
            shadowBlur: 1, //地图阴影
            setIntervalTime: 3000,  //默认刷新时间3秒
          };
          const option = {
            // backgroundColor: '#000',
            visualMap: {
              show: false,
              left: 'right',
              min: this.minMag,
              max: this.maxMag,
              dimension: 4,
              inRange: {
                // color: ['green', 'yellow', 'red']
                color: [
                  '#313695',
                  '#4575b4',
                  '#74add1',
                  '#abd9e9',
                  '#e0f3f8',
                  '#ffffbf',
                  '#fee090',
                  '#F5C000',
                  '#FF850D',
                  '#DB520B',
                  '#F12D00',

                ]
              },
              realtime: false,
              calculable: true,
              textStyle: {
                color: '#fff'
              }
            },
            bmap: {
              center: [116.36, 39.92],
              zoom: 12,
              roam: true,

            },
            title: {
              text: mapData.title,
              right: '20px',
              top: 26,
              textStyle: {
                fontSize: 23,
                color: '#feb64d'
              }
            },
            series: [
              {
                type: 'flowGL',
                coordinateSystem: 'bmap',
                data: this.taxiData1,
                supersampling: 1,
                particleType: 'line', //粒子类型
                // -------------------------------
                particleDensity: 32,  //粒子密度
                particleSize: 3,  //粒子大小
                particleSpeed: 2,  //粒子速度
                // gridWidth: windData.nx,
                // gridHeight: windData.ny,
                itemStyle: {
                  opacity: 0.7
                }
              }
            ]
          }
          this.map.setOption(option)
        // }
      // })

    }
  },
  beforeDestroy() {
    this.$store.commit('refresh')
  }
}

</script>
<style>
#app{
position: relative;
height:100%;
width:100%;
}
#loading {
  z-index: 99;
  position:absolute;
  top: 50%;
  left: 48%;
  margin-left: -130px;
  text-align: center;
  margin-top: -50px;
  width: 280px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: yellow;
  font-size: 20px;
}
#menuLeft {
position: absolute;
top: 20px;
left: 12px;
width: 22%;
height: 30%;
z-index: 100;
font-size: 20px;
font-weight: 700;
color: white;
background-color: rgba(49, 51, 53, 0.7);
background-image: url("../../assets/image/public_resource/border_new1.png");
background-size: 100% 100%;
/*opacity: 0.8;*/
border-radius: 20px;
overflow: auto;
}
#step1{
margin-left: 30px;
}
#VisualShow{
margin-left: 20px;
}

</style>